import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom'
import { Home, Movies, About } from './views'
import './App.less'
const { Header, Content, Footer } = Layout;
export default class App extends Component {
  constructor() {
    super()
    this.state = {
      defaultSelectedKeys: 'home'
    }
  }
  render() {
    return (
      <Router>
        <div className="app">
          <Layout className="layout">
            {/* header */}
            <Header>
              <div className="logo">
                <a href={'/'}> Qian Feng Fly</a>
              </div>
              <Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={[this.state.defaultSelectedKeys]}
                style={{ lineHeight: '64px' }}
              >
                <Menu.Item key="home">
                  <Link to="/home">首页</Link>
                </Menu.Item>
                <Menu.Item key="movies">
                  <Link to="/movies">电影</Link>
                </Menu.Item>
                <Menu.Item key="about">
                  <Link to="/about">关于</Link>
                </Menu.Item>
              </Menu>
            </Header>
            {/* content */}
            <Content style={{ padding: '0 50px' }}>
              {/* exact 精确匹配 */}
              <Route path="/" exact render={() => <Redirect to="/home" />}></Route>
              <Route path="/home" component={Home}></Route>
              <Route path="/movies" component={Movies}></Route>
              <Route path="/about" component={About}></Route>
            </Content>
            {/* footer */}
            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
          </Layout>
        </div >
      </Router>
    )
  }
}
